<div class="cd-col-form">
  <form
    name="bucketForm"
    #frm="ngForm"
    [formGroup]="syncPolicyForm"
    *cdFormLoading="loading"
    novalidate>
    <div class="card">
      <div
        i18n="form title"
        class="card-header">
        {{ action | titlecase }} {{ resource | upperFirst }}
      </div>

      <div class="card-body">
        <!-- Group Id -->
        <div class="form-group row">
          <label
            class="cd-col-form-label required"
            for="group_id"
            i18n>Group Id</label>
          <div class="cd-col-form-input">
            <input
              id="group_id"
              name="group_id"
              class="form-control"
              type="text"
              i18n-placeholder
              placeholder="Group Id..."
              formControlName="group_id"
              [readonly]="editing"/>
            <span
              class="invalid-feedback"
              *ngIf="syncPolicyForm.showError('group_id', frm, 'required')"
              i18n>This field is required.</span>
          </div>
        </div>

        <!-- Status -->
        <div class="form-group row">
          <label
            class="cd-col-form-label required"
            for="status"
            i18n>Status</label>
          <div class="cd-col-form-input">
            <select
                id="status"
                name="status"
                class="form-select"
                formControlName="status">
              <option
                i18n
                value="{{syncPolicyStatus.ENABLED}}">{{syncPolicyStatus.ENABLED | upperFirst }}</option>
              <option
                i18n
                value="{{syncPolicyStatus.ALLOWED}}">{{syncPolicyStatus.ALLOWED | upperFirst }}</option>
              <option
                i18n
                value="{{syncPolicyStatus.FORBIDDEN}}">{{syncPolicyStatus.FORBIDDEN | upperFirst }}</option>
            </select>
            <span
              class="invalid-feedback"
              *ngIf="syncPolicyForm.showError('status', frm, 'required')"
              i18n>This field is required.</span>
          </div>
        </div>

        <!-- Bucket Name -->
        <div class="form-group row">
          <label
            class="cd-col-form-label"
            for="bucket_name"
            i18n>Bucket Name</label>
          <div class="cd-col-form-input">
            <input
              id="bucket_name"
              name="bucket_name"
              class="form-control"
              type="text"
              i18n-placeholder
              placeholder="Bucket Name..."
              formControlName="bucket_name"
              [readonly]="editing"
              [ngbTypeahead]="bucketDataSource"/>
            <span
              class="invalid-feedback"
              *ngIf="syncPolicyForm.showError('bucket_name', frm, 'bucketNameNotAllowed')"
              i18n>The bucket with chosen name does not exist.</span>
          </div>
        </div>
      </div>

      <div class="card-footer">
        <cd-form-button-panel
          (submitActionEvent)="submit()"
          [form]="syncPolicyForm"
          [submitText]="(action | titlecase) + ' ' + (resource | upperFirst)"
          wrappingClass="text-right"></cd-form-button-panel>
      </div>
    </div>
  </form>
</div>
